<template>
  <view style="width: 100%;height: 100%;">
    <view class="root" :style="{display: !visibleCamera ? 'flex': 'none'}">
      <view class="content">
        <uni-forms ref="formRef" :model="form" validateTrigger="blur" label-position="top" label-width="100%"
          err-show-type="toast">
          <view class="content-wrapper">
            <yy-title title="车辆信息"></yy-title>
            <view class="content-inner-wrapper">
              <uni-forms-item label="车牌号:" name="carNumber" required key="carNumber">
                <view class="form-content-item" :class="form.carNumber ?  '' : 'input-item'" @click="handleSelectCar">
                  <uni-easyinput type="text" v-model="form.carNumber" :inputBorder="false"
                    :placeholder="form.carNumber ? '请填写' :'请选择'" :clearable="false" disabled />
                  <uni-icons type="right" size="21" color="#C2C0C0"></uni-icons>
                </view>
              </uni-forms-item>
              <uni-forms-item label="取车时间:" name="takeTime" required key="takeTime">
                <view class="form-content-item" :class="form.takeTime ?  '' : 'input-item'">
                  <uni-datetime-picker type="datetime" :start="startTime" :end="endTime" v-model="form.takeTime"
                    :border="false" hide-second>
                    <uni-easyinput type="text" v-model="form.takeTime" :inputBorder="false" placeholder="请选择"
                      :clearable="false" disabled />
                  </uni-datetime-picker>
                  <image :src="baseImgUrl + 'day-icon2.png'" style="width: 30rpx;height: 30rpx;padding:0 10rpx;">
                </view>
              </uni-forms-item>
            </view>
          </view>
          <view class="content-wrapper">
            <yy-title title="取车人员">
              <text>（默认为送修人员，可修改）</text>
            </yy-title>
            <view class="content-inner-wrapper">
              <uni-forms-item label="身份证号:" name="takeIdcard" required key="takeIdcard">
                <view class="form-content-item" :class="form.takeIdcard ?  '' : 'input-item'">
                  <uni-easyinput type="idcard" :maxlength="18" v-model="form.takeIdcard" :inputBorder="false"
                    placeholder="请填写" :clearable="true" />
                  <u-icon slot="right" size="21" name="scan" color="#2488F5" @click="handleCamera"></u-icon>
                </view>
              </uni-forms-item>
              <uni-forms-item label="姓名:" name="takeName" key="takeName">
                <view class="form-content-item" :class="form.takeName ?  '' : 'input-item'">
                  <uni-easyinput type="text" v-model="form.takeName" :inputBorder="false" placeholder="请填写"
                    :clearable="true" />
                </view>
              </uni-forms-item>
              <uni-forms-item label="手机号码:" name="takePhone" key="takePhone">
                <view class="form-content-item" :class="form.takePhone ?  '' : 'input-item'">
                  <uni-easyinput type="number" :maxlength="11" v-model="form.takePhone" :inputBorder="false"
                    placeholder="请填写" :clearable="true" />
                </view>
              </uni-forms-item>
            </view>
          </view>
        </uni-forms>
      </view>
      <view class="bottom">
        <yy-button-submit @submit="onSubmit"></yy-button-submit>
      </view>
    </view>
    <yy-photo-mask :visible.sync="visibleCamera" :baseImgUrl="baseImgUrl" :clientId="clientId"
      :clientSecret="clientSecret" @parsedSuccess="onParsedSuccess"></yy-photo-mask>
  </view>
</template>

<script>
  import _ from '@/utils/lodash.js'
  import uploadFileMixin from '../../../utils/upload-file-mixin'
  import {
    Toast,
    generateUrlOptions,
    getEndOfTodayTimestamp,
    getOptionsParams,
    getTimestampDaysAgo,
    idCardRule,
    isLoading,
    navBack,
    navTo,
    phoneRule,
    requireInputRule
  } from '../../../utils/util'
  import {
    addPawnRecordDetails
  } from '../../../api/api'

  import moment from '../../../utils/moment'
  import {
    maintenanceRecordsUpdate
  } from '../../../api/myself'

  export default {
    mixins: [uploadFileMixin],
    data() {
      return {
        baseImgUrl: this.$baseImgUrl,
        clientId: this.$clientId,
        clientSecret: this.$clientSecret,
        routerParams: {},
        formRef: null,
        form: this.initForm(),
        startTime: '',
        endTime: getEndOfTodayTimestamp(),
        rules: {
          carNumber: {
            rules: [...requireInputRule('请填写车牌号！')]
          },
          takeIdcard: {
            rules: [...requireInputRule('请填写身份证号！'), ...idCardRule()]
          },
          takeTime: {
            rules: [{
              required: true,
              errorMessage: "请选择取车时间！",
            }]
          },
          takePhone: {
            rules: [...phoneRule(false)]
          },
        },
        visibleCamera: false
      }
    },
    onLoad(options) {
      this.routerParams = getOptionsParams(options)
      // 设置车牌号
      this.form.carNumber = this.routerParams.carNumber ? this.routerParams.carNumber : '无车牌'
      this.form.takeIdcard = this.routerParams.sendRepairIdcard
      this.form.takeName = this.routerParams.sendRepairName
      this.form.takePhone = this.routerParams.sendRepairPhone
      this.startTime = moment(this.routerParams.sendRepairTime).valueOf()
      if (this.routerParams.action === 'addTakeCar') {
        this.form.carNumber = ''
      }
    },
    onReady() {
      this.$refs.formRef.setRules(this.rules)
    },
    methods: {
      initForm() {
        return {
          carNumber: '',
          takeIdcard: '',
          takeTime: '',
          takeName: '',
          takePhone: ''
        }
      },
      onSubmit() {
        this.$refs.formRef.validate().then(() => {
            let data = {
              id: this.routerParams.id,
              companyMessageId: this.routerParams.companyMessageId,
              ...this.form,
              carNumber: this.form.carNumber === '无车牌' ?
                '' : this.form.carNumber,
              takeTime: this.form.takeTime ? moment(this.form
                .takeTime).format('YYYY/MM/DD HH:mm:ss') : ''
            };
            isLoading(true)
            maintenanceRecordsUpdate(data).then((res) => {
                if (res.code == 200) {
                  Toast(res.message);
                  uni.$emit('add-take-car-success')
                  setTimeout(() => {
                    navBack('back', 2);
                  }, 100)
                }
              })
              .finally(() => {
                isLoading(false)
              })
          })
          .catch(() => {})

      },
      handleAddPawn() {
        this.visiblePawn = true
      },
      handleCancelPawn() {
        this.visiblePawn = false
      },
      handleTime(val) {
        if (val) {
          this.form.pawnStartTime = val[0]
          this.form.pawnEndTime = val[1]
        }
      },
      handleSelectCar() {
        if (!this.form.carNumber) {
          navTo({
            url: '/specialtyBook/maintenanceRecords/takeCar/selectCarNumber',
            params: {
              ...this.routerParams
            }
          })
        }
      },
      handleCamera() {
        this.visibleCamera = true;
      },
      onParsedSuccess(value) {
        const {
          domicileAddress,
          userName,
          idcard,
          nation
        } = value;
        this.$set(this.form, "takeName", userName);
        this.$set(this.form, "takeIdcard", idcard);
        this.visibleCamera = false;
      },
    }
  }
</script>

<style lang="scss" scoped>
  @import '../../../styles/uni-form-label-top.scss';

  .root {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    background: #F9F9F9;

    .content {
      flex: 1;
      height: 0;
      overflow: auto;

      .content-wrapper {
        background: #FFFFFF;
        box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(207, 207, 207, 0.1608);
        border-radius: 8rpx 8rpx 8rpx 8rpx;
        padding: 40rpx 20rpx;
        margin-bottom: 10rpx;
      }

      .pawn-list-wrapper {
        background: #F9F9F9;
        padding: 25rpx;
        margin-bottom: 10rpx;

        .title-name {
          display: flex;
          justify-content: space-between;
          margin-bottom: 23rpx;

          .name-i {
            font-weight: bold;
            font-size: 32rpx;
            color: #181818;
          }

          .delete-i {
            display: flex;
            align-items: center;
            font-weight: 500;
            font-size: 26rpx;
            color: #F94A4A;

            .text-delete {
              margin-left: 10rpx;
            }
          }
        }

        .i-item {
          margin-bottom: 15rpx;
          display: flex;

          .i-label {
            font-weight: 500;
            font-size: 28rpx;
            color: #999999;
            width: 119rpx;
            margin-right: 16rpx;
            position: relative;
            text-align: justify;
            text-align-last: justify;
            flex-shrink: 0;



            &::after {
              content: ':';
              position: absolute;
              right: -8rpx;
            }
          }

          .i-value {
            font-weight: bold;
            font-size: 28rpx;
            color: #101010;
          }

        }
      }

      .datetime-picker-wrapper {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .text-t {
          font-weight: 500;
          font-size: 30rpx;
          color: #666666;
        }

        .t-item {
          font-weight: 400;
          font-size: 28rpx;
          color: #A2A2A2;
          width: 304rpx;
          height: 70rpx;
          background: #F9F9F9;
          border-radius: 8rpx 8rpx 8rpx 8rpx;
          border: 1rpx solid #F1EEEE;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .has-value {
          font-weight: bold;
          font-size: 30rpx;
          color: #181818;
        }
      }
    }
  }


  .tenant-info-wrapper {
    height: 80vh;
    display: flex;
    flex-direction: column;
    padding-top: 30rpx;

    .top-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 134rpx;
      padding: 0 18rpx;


      .p-title {
        font-weight: bold;
        font-size: 30rpx;
        color: #101010;
      }

      .p-cancel {
        font-weight: 500;
        font-size: 28rpx;
        color: #666666;
      }
    }

    .popup-form-wrapper {
      flex: 1;
      overflow: auto;
      height: 0;
    }

    .submit-tenant-info {
      margin-bottom: 17rpx;
      width: 680rpx;
      height: 88rpx;
      background: #2488F5;
      border-radius: 44rpx 44rpx 44rpx 44rpx;
      border: 1rpx solid #ACCBEC;
      font-weight: 500;
      font-size: 36rpx;
      color: #F9F9F9;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 85rpx;
    }
  }
</style>